// 1.导包
import react from "react";
import React from "react";
// React负责：创建元素
// ReactDOM负责：渲染元素
import ReactDOM from "react-dom";


// 2.创建元素-虚拟DOM
// 语法：React.createElement('标签类型',{标签属性:值}，标签内容)
// JS class是关键字，React中类名要换成className
// const h1Node = React.createElement('div', { className: 'mydiv' }, 'hhhhh')
// 数组内的元素，要指定key，，作用与vue中key相同
const h1Node = React.createElement('ul', { className: 'mydiv' }, [
    react.createElement('li', { key: 1 }, '香蕉'),
    react.createElement('li', { key: 2 }, '苹果'),
    react.createElement('li', { key: 3 }, '草莓')
])



// 渲染元素
// ReactDOM.render(创建的React元素,真实DOM作为挂载点)
ReactDOM.render(h1Node, document.getElementById('root'))